<template>
  <div>
    <el-input
      clearable
      placeholder="请输入内容"
      v-model="text"
      @keyup.enter="handleSearch"
    />
    <el-select
      clearable
      v-model="cate"
      placeholder="请选择分类"
      @change="handleCate"
    >
      <el-option
        v-for="(item, index) in categorires"
        :key="index"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script>
import ProApiService from "@/api/pro.js";

export default {
  name: "searchFilter",
  props: ["fitlet"],
  emits: ["update:fitlet"],
  data() {
    return {
      categorires: [],
      text: this.fitlet.search,
      cate: this.fitlet.category,
    };
  },
  mounted() {
    this.getCategories();
  },
  methods: {
    async getCategories() {
      try {
        const data = await ProApiService.getProCategoryApi();
        this.categorires = data;
      } catch (error) {
        console.log(error, "---eee");
      }
    },
    // 搜索回车
    handleSearch() {
      this.$emit("update:fitlet", { ...this.fitlet, search: this.text });
    },
    // 选择分类
    handleCate() {
      this.$emit("update:fitlet", { ...this.fitlet, category: this.cate });
    },
  },
};
</script>

<style lang="scss" scoped></style>
